<template>
  <div class="tips-wrapper">
    <slot></slot>
    <el-popover
      visible-arrow="true"
      width="400px"
      v-model="visible"
      popper-class="tips"
    >
      <div class="tips-header">
        说明
        <i @click="handleClose" class="tips-header_close el-icon-close"> </i>
      </div>
      <div class="tips-body">
        <div class="tips-div" v-for="(item, index) in tips" :key="index">
          {{ item }}
        </div>
      </div>
      <img
        slot="reference"
        src="@/assets/images/helpIcon.png"
        alt=""
        class="help-icon"
      />
    </el-popover>
    <!-- <slot></slot>
    <img
      src="@/assets/images/helpIcon.png"
      alt=""
      class="help-icon"
      @click="handleClose"
    />
    <div v-if="visible" class="tips">
      <div class="tips-header">
        说明
        <i @click="handleClose" class="tips-header_close el-icon-close"> </i>
      </div>
      <div class="tips-body">
        <div class="tips-div" v-for="(item, index) in tips" :key="index">
          {{ item }}
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'Tips',
  data() {
    return {
      visible: false,
    }
  },
  props: {
    tips: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  methods: {
    handleClose() {
      this.visible = !this.visible
    },
  },
}
</script>
<style lang="scss" scoped>
.tips-wrapper {
  position: relative;
  display: flex;
  align-self: flex-end;
}
.help-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  align-self: flex-end;
}
</style>
<style lang="scss">
.tips {
  width: 400px;
  // position: absolute;
  // top: 102px;
  // left: 0px;
  // z-index: 999;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 0;
  .tips-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: linear-gradient(90deg, #3b4a8b, #2f3778);
    font-size: 16px;
    color: #fff;
    position: relative;
    padding: 8;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;

    .tips-header_close {
      position: absolute;
      right: 10px;
      color: #988ca4;
      font-weight: bold;
    }
  }

  .tips-body {
    font-size: 14px;
    padding: 15px 30px 30px;

    .tips-div {
      margin-bottom: 10px;
      color: #988ca4;
      cursor: pointer;
    }
  }
}
</style>
